<!--  -->
<template>
  <div class="roleBox">
    <!-- 搜索 -->
    <Search
      @search="searchRole"
      title="角色名称:"
      placeholder="请输入角色名称"
    ></Search>
    <!-- 添加 -->
    <tableHeaderVue>
      <el-button class="button" type="primary" @click="unitPage"
        >初始当前列表</el-button
      ></tableHeaderVue
    >
    <!-- 表单 -->
    <div class="table">
      <el-table :data="tableList" border width="100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="adminCount" label="用户数" />
        <el-table-column label="添加时间">
          <template #default="scope">
            {{ handleDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template #default="scope">
            <el-switch
              @click="changeStatus(scope)"
              :model-value="scope.row.status"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="157px">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              text
              @click="toAllocResource(scope.row.id)"
              >分配资源</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        v-model:currentPage="pagination.currentPage"
        v-model:page-size="pagination.currentSize"
        :page-sizes="[5, 10, 20, 50]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Search from "@/components/search.vue";
import tableHeaderVue from "@/components/tableHeader.vue";
import { ref, Ref, nextTick } from "vue";
import * as http from "@/request";
import { handleDate } from "@/utils";
import { ElMessage } from "element-plus";
import { useTable } from "@/hooks/useTable";
import { useRouter } from "vue-router";
const router = useRouter();
let newSearch = ref("");
const {
  tableList,
  getTableList,
  pagination,
  handleSizeChange,
  handleCurrentChange,
  searchListContent,
} = useTable(http.roleList, { keyword: newSearch });

// 初始化页面
const unitPage = async () => {
  newSearch.value = "";
  pagination.currentPage = 1;
  pagination.currentSize = 10;
  await nextTick();
  getTableList();
};
// 改变角色状态
const changeStatus = async (scope: any) => {
  // console.log(scope.row);
  let currentRole = tableList.value.find((item) => item.id === scope.row.id);
  // 规避客户端服务器不兼容
  let status: 0 | 1 = currentRole!.status ? 0 : 1;
  let res = await http.roleUpdateStatus(currentRole!.id, status);
  if (res.code === 200) {
    // 成功之后再修改本地数据
    currentRole!.status = status;
    ElMessage({
      message: res.message,
      type: "success",
    });
  }
};
const searchRole = async (keyword: Ref<string>) => {
  newSearch.value = keyword.value;
  await nextTick();
  // 延迟调用搜索函数
  searchListContent();
};

const toAllocResource = (id: number) => {
  router.push(`/ums/allocResource?id=${id}`);
};
</script>
<style lang="scss" scoped>
.roleBox {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  box-sizing: border-box;
  width: 100%;
}
:deep(.cell) {
  text-align: center;
  font-size: 12px;
}
.table {
  :deep(.el-button) {
    padding: 10px 0;
  }
}
.page {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}
</style>
